<%@ page import="micro.pojo.employee" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt" %>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<%--bootstrap表格
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
    <!-- Latest compiled and minified Locales -->
    <script src="https://unpkg.com/bootstrap-table@1.15.3/dist/locale/bootstrap-table-zh-CN.min.js"></script>--%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<style type="text/css">
		.une table td{
			border: 1px solid black;
		}
		.une table th{
			border: 1px solid black;
			text-align: center;
		}
		.une table {
			width: 90%;
			background: #ccc;
			margin: 10px auto;
			border-collapse: collapse;
		}

		th, td {
			height: 25px;
			line-height: 25px;
			text-align: center;
			border: 1px solid #333333;
		}

		th {
			background: #eee;
			font-weight: normal;
		}
		a:link,a:visited{
			text-decoration:none;  /*超链接无下划线*/
		}
		tr {
			background: #fff;
		}
	</style>
</head>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<base href="<%=basePath%>">
<body>
<form action="${pageContext.request.contextPath}/user/order">
	<strong>通过姓名搜索</strong>
		<input type="text" name="name">
		<input type="submit" value="查询">
</form>
<button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#cx">
	<input type="hidden" id="ofa" value="${pageContext.request.contextPath}">
	添加信息
</button>
<!-- 模态框 -->
<div class="modal fade" id="cx" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
	<div class="modal-dialog  modal-dialog-scrollable">
		<div class="modal-content">
			<!-- 模态框头部 -->
			<div class="modal-header">
				<h4 class="modal-title">添加</h4>
				<button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>
			<!-- 模态框主体 -->
			<div class="modal-body">
                <form id="form-madArea-add"  <%--action="${pageContext.request.contextPath}/om/cx"--%> method="get" action="">
                        <div class="form-group" >
                            <label>姓名:</label>
                            <input type="text" class="form-control" id="name1" name="name" placeholder="用户名长度在5-18字符之间"/>
                        </div>
                        <p><label>性别:</label></p>
                                <input type="radio"  name="gender" class="toggle" value="男"  checked = "checked"> 男
                                <input type="radio"  name="gender" class="toggle" value="女"> 女
                        <div class="form-group" >
                            <label for="idCard1">身份证:</label>
                            <input type="text" class="form-control" id="idCard1" name="idCard" placeholder="用户名长度在5-18字符之间"/>
                        </div>
                        <div class="form-group">
                            <label for="email1">电子邮箱:</label>
                            <input  type="text" id="email1" name="email"/>
                        </div>
                        <div class="form-group">
                            <label for="phone1">手机号:</label>
                            <input type="text"  id="phone1" name="phone" placeholder="请输入11位的手机号"/>
                        </div>
                        <div class="form-group">
                            <label for="address1">家庭住址:</label>
                            <input type="text"  id="address1" name="address" placeholder="请输入家庭住址"/>
                        </div>
                            <div class='col-sm-6'>
                                <div class="form-group">
                                    <label for="beginDate1">任职日期：</label>
                                    <!--指定 date标记-->
                                    <div class="input-group date" name="beginDate" >
                                        <input type='text' name="beginDate" id="beginDate1" class="form-control" />
                                        <span class="input-group-addon">
                    					<span class="glyphicon glyphicon-calendar"></span>
               							 </span>
                                    </div>
                                </div>
                            </div>
					<div class="form-group" STYLE="width: 98px">
					<label for="wordID1">职工号:</label>
					<input type="text" class="form-control" id="wordID1" name="workID" placeholder=""/>
			</div>
                        <div class="form-group" STYLE="width: 98px">
                            <label for="workAge1">工龄:</label>
                            <input type="text" class="form-control" id="workAge1" name="workAge" placeholder="/年为单位"/>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                            <button type="button"  class="btn btn-primary"  id="button_preservation" >添加</button>
                        </div>
                </form>
			</div>
			<!-- 模态框底部 -->
		</div>
	</div>
	</div>
	<div class="une">
	<table border="0" cellspacing="0" cellpadding="0">

		<tbody>
		<tr>
			<th width="8%">员工编号</th>
			<th >员工姓名</th>
			<th >性别</th>
			<th >任职日期</th>
			<th>详情查询</th>
			<th>修改</th>
			<th>删除</th>
		</tr>
		<c:if test="${!empty list }">
			<c:forEach items="${list}" var="list">
				<tr>
					<td>${list.id }</td>
					<td>${list.name}</td>
						<td>${list.gender}</td>
                        <td>${list.beginDate}</td>
					<td>
						<button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#tj01" onclick="searchMember(id=${list.id})">
							<input type="hidden" id="path" value="${pageContext.request.contextPath}">
							查看信息
						</button>
						<!-- 模态框 -->
						<div class="modal fade bs-example-modal-lg" id="tj01" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
							<div class="modal-dialog  modal-dialog-scrollable modal-lg">
								<div class="modal-content">

									<!-- 模态框头部 -->
									<div class="modal-header">
										<h4 class="modal-title">查询详情信息</h4>
										<button type="button" class="close" data-dismiss="modal">&times;</button>
									</div>

									<!-- 模态框主体 -->
									<div class="modal-body"  style="text-align:left
">

										<div>
											<p>姓名：<span id="names">---</span></p>
											<p>性别：<span id="genders">---</span></p>
											<p>身份证号：<span id="idCards">---</span></p>
											<p>电子邮件：<span id="emails">---</span></p>
											<p>手机号：<span id="phones">---</span></p>
											<p>家庭住址：<span id="addresss">---</span></p>
											<p>任职日期：<span id="beginDates">---</span></p>
											<p>职工号：<span id="wordIDs">---</span></p>
											<p>工龄：<span id="workAges">---</span></p>
										</div>
                                    </div>
									<!-- 模态框底部 -->
									<div class="modal-footer">
										<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                                    </div>
                                </div>
						</div>
                        </div>
							</td>
						<td><button type="button" class="btn btn-primary" data-toggle="modal"  data-target="#tjs" onclick="searchsd(id=${list.id})">
                            <input type="hidden" id="ofds" value="${pageContext.request.contextPath}">
                            修改</button>
							<div class="modal fade bs-example-modal-lg" id="tjs" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
								<div class="modal-dialog  modal-dialog-scrollable modal-lg">
									<div class="modal-content">

										<!-- 模态框头部 -->
										<div class="modal-header">
											<h4 class="modal-title">修改</h4>
											<button type="button" class="close" data-dismiss="modal">&times;</button>
										</div>

										<!-- 模态框主体 -->
										<div class="modal-body"  style="text-align:left
">
											<form id="addUserForm" action="" method="post" class="form-horizontal">
												<div class="form-group" >
													<label>id:</label>
													<input type="text" class="form-control" id="id" name="id" disabled="disabled" placeholder="用户名长度在5-18字符之间"/>
												</div>
												<div class="form-group" >
													<label>姓名:</label>
													<input type="text" class="form-control" id="name" name="name" disabled="disabled" placeholder="用户名长度在5-18字符之间"/>
												</div>
												<p><label>性别:</label></p>
												<input type="text"  name="gender" id="gender" class="toggle"  disabled="disabled">
												<div class="form-group" >
													<label for="idCard1">身份证:</label>
													<input type="text" class="form-control" id="idCard" disabled="disabled" name="idCard" placeholder="用户名长度在5-18字符之间"/>
												</div>
												<div class="form-group">
													<label for="email1">电子邮箱:</label>
													<input  type="text" id="email" name="email"/><span id="sh"></span>
												</div>
												<div class="form-group">
													<label for="phone1">手机号:</label>
													<input type="text"  id="phone" name="phone" placeholder="请输入11位的手机号"/><span id="sj"></span>
												</div>
												<div class="form-group">
													<label for="address1">家庭住址:</label>
													<input type="text"  id="address" name="address" placeholder="请输入家庭住址"/><span id="sk"></span>
												</div>
													<div class="form-group">
														<label for="beginDate1">任职日期：</label>
														<!--指定 date标记-->
														<input type="text" disabled="disabled" id="beginDate" name="beginDate">
												</div>
												<div class="form-group" >
													<label for="wordID1">职工号:</label>
													<input type="text" class="form-control" disabled="disabled" id="wordID" name="workID" placeholder=""/>
												</div>
												<div class="form-group" STYLE="width: 98px">
													<label for="workAge1">工龄:</label>
													<input type="text" class="form-control" disabled="disabled" id="workAge" name="workAge" placeholder="/为单位"/>
												</div>
											</form>
										</div>
										<!-- 模态框底部 -->

										<div class="modal-footer">
											<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
											<button type="button"  class="btn btn-primary" onclick="updateUser()">修改</button>
										</div>
									</div>
								</div>
							</div></td>
					<td><button onclick="delcfm(${list.id})" class="btn btn-danger"><a href="${pageContext.request.contextPath}/deletes?id=${list.id}">删除</a></button></td>
				</tr>
			</c:forEach>
		</c:if>
		</tbody>
	</table>
	</div>
<div>
	<form action="<%=basePath%>user/order">
	<p>
		每页${page.pageSize}条 当前页${page.size}条 ${page.pageNum}/${page.pages}页 总条数${page.total}
	</p>
	<c:if test="${page.isFirstPage==true}"><a>首页</a></c:if>
	<c:if test="${page.isFirstPage==false}">
		<a href="<%=basePath%>user/order?page=${page.firstPage}">首页</a>
	</c:if>

	<c:if test="${page.hasPreviousPage==true}">
		<a href="<%=basePath%>user/order?page=${page.prePage}">上一页</a>
	</c:if>
	<c:if test="${page.hasPreviousPage==false}"><a>上一页</a></c:if>

	<c:if test="${page.hasNextPage==true}">
		<a href="<%=basePath%>user/order?page=${page.nextPage}">下一页</a>
	</c:if>
	<c:if test="${page.hasNextPage==false}"><a>下一页</a></c:if>

	<c:if test="${page.isLastPage==true}"><a>末页</a></c:if>
	<c:if test="${page.isLastPage==false}">
		<a href="<%=basePath%>user/order?page=${page.lastPage}">末页</a>
	</c:if>
		<input type="text" name="currentPage" id="currentPage"/>
	<input type="submit" value="跳转"/>
	</form>
</div>
</body>
<script type="text/javascript" src="${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js"></script>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/statics/bootstrap/time/bootstrap-datetimepicker-master/js/moment-with-locales.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
	/*bootstrap时间选择器*/
	$(function () {
		$('#beginDate').datetimepicker({
			format: 'YYYY-MM-DD',
			locale: moment.locale('zh-cn')
		});
        $('#birthdays').datetimepicker({
            format: 'YYYY-MM-DD',
            locale: moment.locale('zh-cn')
        });
		$('#brat').datetimepicker({
			format: 'YYYY-MM-DD',
			locale: moment.locale('zh-cn')
		});
		$('#conversionTime').datetimepicker({
			format: 'YYYY-MM-DD',
			locale: moment.locale('zh-cn')
		});
		$('#beginContract').datetimepicker({
			format: 'YYYY-MM-DD',
			locale: moment.locale('zh-cn')
		});
		$('#endContract').datetimepicker({
			format: 'YYYY-MM-DD',
			locale: moment.locale('zh-cn')
		});
		$('#datetimepicker2').datetimepicker({
			format: 'YYYY-MM-DD hh:mm',
			locale: moment.locale('zh-cn')
		})
        $('#beginDate1').datetimepicker({
            format: 'YYYY-MM-DD',
            locale: moment.locale('zh-cn')
        });
        $('#birthday1').datetimepicker({
            format: 'YYYY-MM-DD',
            locale: moment.locale('zh-cn')
        });
        $('#conversionTime1').datetimepicker({
            format: 'YYYY-MM-DD',
            locale: moment.locale('zh-cn')
        });
        $('#beginContract1').datetimepicker({
            format: 'YYYY-MM-DD',
            locale: moment.locale('zh-cn')
        });
        $('#endContract1').datetimepicker({
            format: 'YYYY-MM-DD',
            locale: moment.locale('zh-cn')
        });
        $('#datetimepicker1').datetimepicker({
            format: 'YYYY-MM-DD hh:mm',
            locale: moment.locale('zh-cn')
        });
	});
	function delcfm() {
		if (!confirm("确认要删除？")) {
			window.event.returnValue = false;
		}
	}

	//添加信息
    $('#button_preservation').click(function () {
        var ofa = $("#ofa").val();
        var gender = document.getElementsByName("gender");
        var name = $("#name1").val();
        var idCard = $("#idCard1").val();
        var email1 = $("#email1").val();
        var phone = $("#phone1").val();
        var address = $("#address1").val();
        var beginDate = $("#beginDate1").val();
        var wordID = $("#wordID1").val();
        var workAge = $("#workAge1").val();
        var nameRest = /^[\u4E00-\u9FA5]+$/;
        var IdnumberRest = /^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/;
        var myreg = /^([.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
        var a = /^(\d{4})-(\d{2})-(\d{2})$/
        if (name == '' || name == undefined) {
            alert("姓名不能为空");
            return;
        } else if (!nameRest.test(name)) {
            alert("姓名格式不正确，必须为汉字");
            return;
        } else if (idCard == '' || idCard == undefined) {
            alert("身份证号不能为空");
            return;
        } else if (!IdnumberRest.test(idCard)) {
            alert("身份证号格式不对");
            return;
        } else if (email1 == '' || email1 == undefined) {
            alert("邮箱不能为空");
            return;
        } else if (!myreg.test(email1)) {
            alert("邮箱格式不对");
            return;
        } else if (phone == '' || phone == undefined) {
            alert("手机号不能为空");
            return;
		} else if (phone.length!=11) {
			alert("手机号格式不对");
			return;
        } else if (address == '' || address == undefined) {
            alert("地址不能为空");
            return;
        } else if (!a.test(beginDate)) {
            alert("日期格式输入错误");
            return;
        } else if (wordID == '' || wordID == undefined) {
            alert("职工号不能为空");
            return;
        } else if (workAge == '' || workAge == undefined) {
            alert("工龄不能为空");
            return;
        } else {
            $.ajax({
                url:ofa+"/om/ofa",
                method: "POST",
                data: $('#form-madArea-add').serialize(),
                dataType: "json",
                success: function (data) {
                    if (data.status == "success") {
                        alert("添加成功")
						window.location.href = window.location.href;//页面刷新
					} else {
                        alert("修改失败")
                    }
                },
            });

        }
    })
	//查看信息
	function searchMember(id) {
		alert("查看信息"+id);
		var path = $("#path").val();
		//设为disable则无法获取
		$.ajax({
			url:path+"/sear/searchById",
			method: "GET",
			data: {
				employeesID: id
			},
			dataType: "json",
			success: function(data) {
				if (data.status == "success") {
					//alert(data.member.name);
					$("#names").html(data.employees.name);
					$("#genders").html(data.employees.gender);
					$("#idCards").html(data.employees.idCard);
					$("#emails").html(data.employees.email);
					$("#phones").html(data.employees.phone);
					$("#addresss").html(data.employees.address);
					$("#beginDates").html(data.employees.beginDate);
					$("#wordIDs").html(data.employees.workID);
					$("#workAges").html(data.employees.workAge);
				}
			},
		});
	}
	//修改用户

	function searchsd(id) {
		alert("修改信息"+id);
        var path = $("#path").val();
		//设为disable则无法获取
		$.ajax({
			url:path+"/sear/searchById",
			method: "GET",
			data: {
				employeesID: id
			},
			dataType: "json",
			success: function(data) {
				if (data.status == "success") {
					//alert(data.member.name);
					$("#id").val(data.employees.id);
					$("#name").val(data.employees.name);
					$("#gender").val(data.employees.gender);
					$("#idCard").val(data.employees.idCard);
					$("#email").val(data.employees.email);
					$("#phone").val(data.employees.phone);
					$("#address").val(data.employees.address);
					$("#beginDate").val(data.employees.beginDate);
					$("#wordID").val(data.employees.workID);
					$("#workAge").val(data.employees.workAge);
				}
			},
		});

	}
	function updateUser() {
		var id = jQuery("#id").val();
		alert("修改信息"+id);
		//设为disable则无法获取
		var email = jQuery("#email").val();
		var phone=jQuery("#phone").val();
		var ofds=$("#ofds").val();
		var  address=jQuery("#address").val();
		var myreg = /^([.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
		if(email ==''){
			$("#sh").html("邮箱不能为空")	.css("color","green");
		}else if(!myreg.test(email)){
			$("#sh").html("请输入有效邮箱!")	.css("color","green");
		}else if(phone==''){
			$("#sh").html("");
			$("#sj").html("手机号码不能为空")	.css("color","green");
		} else if(phone<=11&&phone<=1) {
			$("#sj").html("请输入有效的手机号").css("color","red");
		}else if(address ==''){
			$("#sj").html("");
			$("#sk").html("地址不能为空").css("color","red");
		}else {
			$("#sk").html("");
            $.ajax({
                url:ofds+"nv/ofd",
                method: "POST",
                data: {
                    id:id,email:email,phone:phone,address:address
                },
                dataType: "json",
                success: function(data) {
                    if (data.status == "success") {
                        alert("修改成功")
						window.location.href = window.location.href;
                    }else {
                        alert("修改失败")
                    }
                },
            });

        }
	}
</script>
</html>